<template>
  <div class="contrainer">
    <!-- 新增问卷 -->
    <div>
      <el-button type="primary" size="mini" @click="addQuestion"
        >添加问卷</el-button
      >
    </div>
    <!-- 搜索项 -->
    <div class="search_bar">
      <el-form size="small" :inline="true" label-width="68px">
        <el-form-item label="问卷标题">
          <el-input
          v-input-restrict
            v-model="sea_form.surveyName"
            placeholder="请输入问卷标题"
            clearable
          />
        </el-form-item>
        <el-form-item label="问卷状态">
          <el-select
            placeholder="请选择"
            v-model="sea_form.surveyStatus"
            filterable
          >
            <el-option
              v-for="item in status"
              :key="item.statuid"
              :label="item.name"
              :value="item.statuid"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="search_btns">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getdataBysearch"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 问卷列表 -->
    <el-table v-loading="loading" :data="questionList">
      <el-table-column
        show-overflow-tooltip
        label="问卷编号"
        align="center"
        prop="surveyNo"
      />
      <el-table-column
        show-overflow-tooltip
        label="问卷标题"
        align="center"
        prop="surveyName"
      />
      <el-table-column
        width="120"
        label="问卷状态"
        align="center"
        prop="surveyStatus"
      >
        <template slot-scope="scope">
          <!-- // 0.已发放 1.未发放 2.已停止 -->
          <el-tag type="success" v-if="scope.row.surveyStatus == 1"
            >已发放</el-tag
          >
          <el-tag type="warning" v-if="scope.row.surveyStatus == 0"
            >未发放</el-tag
          >
          <el-tag type="info" v-if="scope.row.surveyStatus == 2">已停止</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="回收数量"
        align="center"
        prop="answerNum"
      />
      <el-table-column
        label="添加时间"
        sortable
        align="center"
        prop="createTime"
        width="160"
      />
      <el-table-column label="操作" align="center" width="420">
        <!-- // 0.启用 1.禁用 2.待提交 3.待分院审核 4.待学校审核 5.已驳回-->
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="preview(scope.row.id)"
            >预览</el-button
          >
          <el-button size="mini" type="text" @click="updateByid(scope.row)"
            >编辑</el-button
          >
          <!-- 判断问卷状态显示发放或停止 0未发放 1已发放 2已停止 -->
          <el-button
            size="mini"
            type="text"
            v-show="scope.row.surveyStatus == 0||scope.row.surveyStatus == 2"
            @click="sendByid(scope.row)"
            >发放</el-button
          >
          <el-button
            size="mini"
            type="text"
            v-show="scope.row.surveyStatus == 1"
            @click="sendByid(scope.row)"
            >停止</el-button
          >

          <el-button size="mini" type="text" @click="copyByid(scope.row)"
            >复制</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="statisticsByid(scope.row)"
            >统计
          </el-button>
          <el-button size="mini" type="text" @click="delByid(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="sea_form.pageNum"
      :limit.sync="sea_form.pageSize"
      @pagination="getList"
    />
    <!-- 预览组件 -->
    <Preview ref="preview"></Preview>
    <!-- 发布弹框 -->
    <sendQuestion ref="sendquestion" @sendQuestionSucess="successtips"></sendQuestion>
     <!-- 问卷标题弹框 -->
     <surveyName :isshow.sync="showSurvey" :type="type" @copySurvey="copySurvey" ref="surveyname"></surveyName>
  </div>
</template>

<script>
import {
  getQuestionlist,
  addQuestion,
  delQuestion,
  changeQuestion,
  copyQuestion
} from "../../api/questions/index";
// 引入新增预览组件
import Preview from "./components/preview.vue";
import sendQuestion from "./components/sendQuestion.vue";
import surveyName from './components/surveyName.vue'
export default {
  name: "MixedStateAdminIndex",
  components: {
    Preview,
    sendQuestion,
    surveyName
  },
  data() {
    return {
      // 遮罩
      loading:false,
      showSurvey:false,
      // 总条数
      total: 3,
      // 搜索条件
      sea_form: {
        pageNum: 1,
        pageSize: 10,
        questionTitle: "",
        questionState: "",
      },
      type:'',
      oldSurveyId:'',
      // 问卷状态
      status: [
        {
          statuid: 0,
          name: "未发放",
        },
        {
          statuid: 1,
          name: "已发放",
        },
        {
          statuid: 2,
          name: "已停止",
        },
      ],
      // 表格数据
      questionList: [
        
      ],
      // 预览
      isPreview: false,
      sendshow: false,
    };
  },

  mounted() {},
  created() {
    // 获取问卷数据
    this.getList();
  },
  methods: {
    // 搜索
    getdataBysearch() {
      this.sea_form.pageNum = 1;
      // 发送获取信息请求
      this.getList();
    },
    // 重置
    resetSearch() {
      this.sea_form = {
        pageNum: 1,
        pagrSize: 10,
        surveyName: "",
        surveyStatus: "",
      };
      this.getdataBysearch();
    },
    // 获取问卷数据
    async getList() {
      this.loading=true
      let res = await getQuestionlist(this.sea_form);
      const {code,rows,total}=res
      if (code==200){
        this.loading=false
        this.questionList = rows;
        this.total = total;
      }else {
        this.loading=false
      }
      // 发送获取数据请求
    },
    // 新增问卷
    async addQuestion() {
      this.type=1
      this.showSurvey=true
      let res = await addQuestion();
      let id = res.surveyId;
      this.$refs.surveyname.show(id)
    },
    // 预览
    preview(id) {
      this.$refs.preview.show(id);
    },
    // 编辑
    updateByid(row) {
      // 判断状态是否打开中间页
      if (row.surveyStatus == 1 || row.surveyStatus == 2) {
        this.$router.push({
          path: "/question/updateCenter",
          query:{
            id:row.id
          }
        });
      } else {
        this.$router.push({
          path: "/question/addQuestion",
          query: {
            id: row.id,
          },
        });
      }
    },
    // 删除
    delByid(row) {
      this.$modal
        .confirm(`确认删除【${row.surveyName}】问卷吗？删除后不可恢复`)
        .then(() => {
          delQuestion(row.id).then((res) => {
            this.$modal.msgSuccess("删除成功");
            this.getList();
          });
          // 调取删除接口
        })
        .catch(() => {});
    },

    // 停止发放
    sendByid(row) {
      var stopobj = {
        surveyId: row.id,
        surveyStatus:2,
      };
      if (row.surveyStatus == 1) {
        this.$modal
          .confirm(`停止后，问卷将无法继续填写，是否继续？`)
          .then(() => {
            // 调取停止接口
            changeQuestion(stopobj).then((res) => {
              this.$modal.msgSuccess("问卷停止成功");
              this.getList()
            });
          })
          .catch(() => {});
      } else {
        this.$refs.sendquestion.show(row);
      }
    },
    // 统计
    statisticsByid(row) {
      this.$router.push({
        path: `/question/Statistics?id=${row.id}&surveyStatus=${row.surveyStatus}`
      });
    },
    // 复制
    async copySurvey(e){
      const loading = this.$loading({
        lock: true,
        text: '正在复制…',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.6)'
      });

      let params={
        surveyName:e,
        surveyId:this.oldSurveyId
      }
      let res=await copyQuestion(params)
      const { code } = res
      if(code==200){
        this.$modal.msgSuccess("复制成功！");
        this.showSurvey=false
        this.getList()
        loading.close()
      }else {
        loading.close()
      }
    },
    // 复制
    copyByid(row) {
      this.type=2
      this.showSurvey=true
      this.oldSurveyId = row.id;
      this.$refs.surveyname.show()
    },
    // 回答
    answerByid(row){
      this.$router.push({
        path: `/question/answer`,
        query: {
          id: row.id,
        },
      });
    },
    // 发放成功提示
    successtips(){
      this.$modal.msgSuccess("问卷发放成功");
      this.getList()
    }
  },
};
</script>

<style lang="scss" scoped>
.contrainer {
  padding: 20px;
}
.search_bar {
  padding: 20px 20px 0px 20px;
  background-color: #fafafa;
  margin: 20px 0px;
  .search_btns {
    float: right;
  }
}
</style>
